<!--
 * @Author       : 震雨 LuckRain7
 * @Date         : 2020-07-14
 * @Description  : 导航栏  用户菜单
 * @ Love and Peace
-->

<template>
  <a-dropdown>
    <div class="header-avatar" style="cursor: pointer">
      <a-avatar
        class="avatar"
        size="small"
        shape="circle"
        :src="info.avatar ? info.avatar : '/default-avater.jpg'"
      />
      <span class="name">{{ info.username }}</span>
    </div>
    <a-menu :class="['avatar-menu']" slot="overlay">
      <!--  -->
      <a-menu-item>
        <a-icon type="user" />
        <span
          @click="
            () => {
              $router.push('/personalCenter');
            }
          "
          >个人中心</span
        >
      </a-menu-item>
      <!--  -->
      <a-menu-item @click="clickSetting()">
        <a-icon type="setting" />
        <span>设置</span>
      </a-menu-item>
      <!--  -->
      <a-menu-divider />
      <!--  -->
      <a-menu-item>
        <a @click="loginOut" href="javascript:;">
          <a-icon type="poweroff" />
          <span>&nbsp;退出登录</span>
        </a>
      </a-menu-item>
    </a-menu>
  </a-dropdown>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "HeaderAvatar",
  computed: {
    ...mapState("setting", ["weekMode"]),
    // 获取vuex 中 user 模块下的 info this.$store.state.user.info
    ...mapState("user", ["info"]),
  },
  methods: {
    // ----- 退出登录 ------
    loginOut() {
      // this.$router.replace({ path: "/login" });
      // location.reload();
      this.$store.dispatch("user/resetMenuRight");
      localStorage.removeItem("zhqh-pro-token");
      alert("已退出");
      //this.$router.push("/login");
    },
      //问题提交
    problemSubmit() {
      console.log("！！！");
      this.$router.push({
        // path: "src/views/ProblemFeedbackSystem/ProblemSubmit.vue",
        path: "ProblemSubmit",
        // path: "OtherOutputDetail",
        // query: {
        //   Id: record.id,
        // },
      });
    },
    //问题列表
    problemList() {
      console.log("！！！");
      this.$router.push({
        path: "ProblemPersonList",
      });
    },

    // ----- 控制 系统设置的开启 -----
    clickSetting() {
      this.$store.commit("common/setSysSettingShow", true);
    },
  },
};
</script>

<style lang="less">
.header-avatar {
  display: inline-flex;
  .avatar,
  .name {
    align-self: center;
  }
  .avatar {
    margin-right: 8px;
  }
  .name {
    font-weight: 500;
  }
}
.avatar-menu {
  width: 150px;
}
</style>
